<template>
  <!-- 主要容器 -->
  <div class="main">
    <div
      v-if="isLoaidng"
      class="w-h-full"
    >
      正在加载... ...
    </div>
    <!-- <el-skeleton
      v-if="isLoaidng"
      :rows="2"
    ></el-skeleton> -->
    <div v-else>
      <UniLoadingText
        :content="content"
        :duration="20"
        @load-complete="emit('loadComplete')"
      ></UniLoadingText>
    </div>
  </div>
</template>

<script lang="ts" setup>
// Props：任务
const props = defineProps<{ task: Promise<string> }>();
const emit = defineEmits(["loadComplete"]);

const isLoaidng = ref(true);
const content = ref("");
props.task
  .then((response) => {
    content.value = response;
  })
  .catch((error) => {
    content.value = "Error fetching task";
  })
  .finally(() => {
    console.log("Task completed");

    isLoaidng.value = false;
  });
</script>

<style lang="scss" scoped>
.el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
}
</style>
